{extend name="./public/base" /}
{block name="title"}个人资料{/block}
{block name="style"}
<style type="text/css">
	.content{
		text-align: center;
		margin: auto;
		background-color:#fff;
		font-size: 12px;
		color: #6e5858;
	}
	.top{
		width: 100%;
	    background-color: #ffba58;;
	    height: 35px;
	    color: #fff;
	    text-align: center;
	    line-height: 35px;
	    font-size: 14px;
	    margin-bottom: 10px;
	}
	
	.photo{
		width: 100%;
	   /* height: 29%;*/
	   	height:260px;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	}
	.tags{
		width: 90%;
	    background-color: #fff;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
        top: -200px;
        color: #8c90a6;
        font-size:12px;
	}
	.tags_line1{
		margin-top: 40px;
		padding-top: 40px;
	}
	.tags_line1 span{
		display: inline-block;
	}
	.tags_line1 .my_tag{
		width: 90px;
	    height: 90px;
	    border: 2px solid #dfc551;
	    margin-left: 4px;
	    position: relative;
	    top: -50px;
	    box-shadow: 0px 5px 2px 2px #b5adadf5;
	}
	.tags_line1 .my_tag img{
		width: 100%;
		height: 100%;

	}
	.tags_line1 .tag_more{
		width: 30%;
	    text-align: center;
	    position: relative;
	    top: -90px;
	}
	.tags_line1 .tag_info{
    	width: 30%;
	    position: relative;
	    top: -90px;
	    padding-left: 3px;
	}
	.tags_line1 .tag_info div{

	}

	.line{
		height: 2px;
	    background-color: #edecec;
	    margin: 2px auto;
	    width: 90%;
	}
	.line1{
		height: 2px;
	    background-color: #edecec;
	    margin: 4px auto;
	    width: 90%;
	    margin-top: -30px;
	}
	.tags .tag_chose{
		padding-bottom: 20px;
		padding-left: 14px;
	}
	.tag_chose .list .my_img{
		width: 40px;
		height: 40px;
		margin: auto;
	}
	.tag_chose .list .my_data{
		margin-top: 10px;
    	text-align: center;
    	color: #8c90a6;
	}
	.tag_chose .list img{
		width: 100%;
		height: 100%;
	}
	.tags .tag_chose span{
		display: inline-block;
	    border-radius: 20px;
	    width: 48%;
	}
	
	.info{
		width: 90%;
	    background-color: #f3f1f114;
	    margin: auto;
	    border-radius: 15px;
	    box-shadow: 0px 5px 2px 2px #f3f1f1f5;
	    position: relative;
	    top: -160px;
	}
	.info_list{
		width: 90%;
	}
	.my_info{
		width: 110%;
		padding-bottom: 30px;
		color: #8c90a6;
		font-size: 12px;
	}
	.my_info .item span{
		display:  inline-block; 
		width: 30%;
	}
	.my_info .item .lable{
		position: relative;
	    left: -75px;
	    top: 3px;
	}
	.my_info .item .img{
		width: 30px;
	    height: 30px;
	    position: relative;
	    top: 10px;
	    left: -70px;
	}
	.my_info .item .tab{
		width: 20px;
	    height: 20px;
	    padding-left: 280px;
	    position: relative;
	    top: -18px;
	}

	.my_info .item img{
		width: 100%;
		height: 100%;
	}

	.info_list .item span{
	 	display: inline-block;
	}
	.weui-tabbar__icon{
    	width: 30px;
    	height: 30px;
    }
    .weui-tabbar__icon image{
    	width: 100%;
    	height:100%;
    }
    .weui-tabbar__label{
    	font-size: 12px;
    }
    .tab_color{
    	color: #ff5871;
    }
    .up{
    	position:relative;
    	top: -5px;
    }
	.tab img{
		width: 20px;
	}
	.my_info .item{
		width: 90%;
	}
</style>
{/block}
{block name="main"}
	<div id="app_content" class="content"> 
		<div class="top" >
			<span>个人资料</span>
		</div>
	<!-- 	:style="{backgroundImage: 'url('+img+')'}" -->
		<div class="photo" :style="{backgroundImage: 'url('+avatar+')'}"style="background-size:cover;background-repeat:no-repeat;filter: blur(10px);">
		</div>
		<div class="tags">
			<div class="tags_line1">
				<span class="my_tag"><img :src="avatar" alt=""></span>
				<span class="tag_info">
					<div class="tag_info_name">{{user_name}}</div>
					<div class="tag_info_sex">{{gender}}</div>
				</span>
				<span class="tag_more"><span class="up">上传资料</span><a :href="up"><span class="tab"><img  src="__STATIC__/images/arrowrigth.png" alt=""></span></span></a>
			</div>
			<div class="line1"></div>
			<div class="tag_chose">
				<span class="list">
					<div class="my_img"><img src="__STATIC__/images/auth.png" alt=""></div>
					<a :href="authen"><div class="my_data">我的认证</div></a>
				</span>
				<span class="list">
					<div class="my_img"><img src="__STATIC__/images/info.png" alt=""></div>
					<a :href="info"><div class="my_data">我的资料</div></a>
				</span>
			</div>
		</div>
		<div class="info">
			<div class="info_list">
				<div class="my_info">
					<div class="item">
						<span class="img"><img src="__STATIC__/images/member.png" alt=""></span><span class="lable">会员服务</span><a :href="service"><span class="tab"><img src="__STATIC__/images/arrowrigth.png" alt=""></span></a>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/look.png" alt=""></span><span class="lable">我看过谁</span><a :href="look_list"><span class="tab"><img src="__STATIC__/images/arrowrigth.png" alt=""></span></a>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/look.png" alt=""></span><span class="lable">谁看过我</span><a :href="look_lista"><span class="tab"><img src="__STATIC__/images/arrowrigth.png" alt=""></span></a>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/like.png" alt=""></span><span class="lable">喜欢我的</span><a :href="look_list"><span class="tab"><img src="__STATIC__/images/arrowrigth.png" alt=""></span></a>
					</div>
					<div class="line"></div>
					<div class="item">
						<span class="img"><img src="__STATIC__/images/setting.png" alt=""></span><span class="lable">设置</span><a :href="setting"><span class="tab"><img src="__STATIC__/images/arrowrigth.png" alt=""></span></a>
					</div>
				</div>
				
				
			</div>
		</div>
		<!-- <div class="weui-tabbar">
		    <a :href="woman"  class="weui-tabbar__item">
		      <div class="weui-tabbar__icon" >
		        <img src="__STATIC__/images/women.png" alt="">
		      </div>
		      <p class="weui-tabbar__label">女士</p>
		    </a>
		    <a :href="man"  class="weui-tabbar__item">
		      <div class="weui-tabbar__icon">
		        <img src="__STATIC__/images/man.png" alt="">
		      </div>
		      <p class="weui-tabbar__label">男士</p>
		    </a>
		    <a :href="my" class="weui-tabbar__item">
		      <div class="weui-tabbar__icon tab_color">
		        <img src="__STATIC__/images/personal.png" alt="">
		      </div>
		      <p class="weui-tabbar__label">我的</p>
		    </a>
		  </div>
		</div> -->
		{include file="index@public/foot" /}
	</div>
{/block}
{block name="script"}
<script type="text/javascript" >
    $(document).ready(function(){ 
		var host = "http://"+document.domain+"/api.php/";
		var vm  = new Vue({
			el: '#app_content',
			data: {
				tab:3,
			    members: [],
			    avatar:'',
			    gender:"",
			    user_name:'',
			    text11:'个人资料',
			    up:"{:url('up')}",
			    man:"{:url('index')}",
			    woman:"{:url('index')}",
			    my:"{:url('my')}",
			    authen:"{:url('authen')}",
			    info:"{:url('info')}",
			    service:"{:url('service')}",
			    look_list:"{:url('look_list')}",
			    setting:"{:url('setting')}",
			    look_lista:"{:url('look_lista')}",
			},
		    methods:{
		        getMemberList:function(){
		        	var t = this;
		        	$.ajax({
		        		url: host+'member/user_info',
		        		type: 'post',
		        		dataType: 'json',
		        		data: {page: 1},
		        		success:function(data){
		        			console.log(data.code);
		        			if(data.code == 1){
		        				t.members = data.data;
		        				t.avatar = data.data.member_data.avatar;
		        				t.gender = data.data.member_data.gender;
		        				t.user_name = data.data.member_data.user_name;
		        				t.text11 = "个人资料";
		        			}
		        		},
		        		error:function(e){
		        			console.log('error'+e);
		        		}
		        	})	
		        },
		    },
		    mounted: function () {
	            console.log("已初始化");
	            this.getMemberList();
	            //console.log();
	        }

		})
		

		
	});
</script>
{/block}